<template>
    <el-form :model="userForm" label-width="100px" :rules="rules" ref="uForm" v-loading="loading">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item v-if="!this.id" label="密码" prop="password">
            <el-input v-model="userForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="userForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="userForm.email" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="userForm.gender">
                <el-radio :label=1>男</el-radio>
                <el-radio :label=0>女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload 
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :limit="1"
                    :file-list="fileList"
                    style="width: 150px; height: 150px; overflow: hidden;"
                    :on-change="changeFile"
                    :on-remove="removeFile">
                    <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="save()" style="margin-right: 10%;">保存</el-button>
            <el-button type="danger" @click="() => {
                this.$message({message: '取消成功', type: 'info'})
                this.$emit('update:show', false)
                this.$emit('getTableData')
            }">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { get, post } from '@/plugins/axios.js'
    import { url } from './api.js'
    import store from '@/store/index.js'
    export default {
        name: 'UserEdit',
        props: ['id'],
        created() {
            if(this.id != null) {
                delete this.userForm.password
                this.userForm.id = this.id
                this.getById()
            }
        },
        data() {
            return {
                fileList: [],
                userForm: {
                    username: "",
                    password: "",
                    phone: "",
                    email: "",
                    gender: 1,
                    icon: ""
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: '请输入用户姓名',
                            trigger: 'blur',    
                        },
                        {
                            max: 50,
                            message: '用户最多输入50个字符',
                            trigger: 'blur',    
                        }, 
                    ],
                    password: [
                        {
                            required: true,
                            message: '请输入登录密码',
                            trigger: 'blur'
                        },
                    ],
                    phone: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1(3\d|4[5-9]|5[0-3,5-9]|6[567]|7[0-8]|8\d|9[0-3,5-9])\d{8}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur'
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: '请输入电子邮箱',
                            trigger: 'blur'
                        },
                        {
                            type: 'email',
                            message: '请输入正确的电子邮箱',
                            trigger: 'blur'
                        }
                    ],
                    gender: [
                        {
                            required: true,
                            message: '请选择用户性别',
                            trigger: 'blur'
                        },
                    ]
                }
            }
        },
        computed: {
            loading () {
                return store.getters.GET_LOADING
            }
        },
        methods: {
            save() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        post(this.id === null ? url.add : url.update, this.userForm, content => {
                            this.$emit('update:show', false)
                            this.$emit('getUserData')
                        })
                    }
                })
            },
            getById() {
                get(url.getById, {id: this.id}, content => {
                    for (const key in this.userForm) {
                        if(Object.hasOwnProperty.call(content, key)) {
                            this.userForm[key] = content[key]
                        }
                    }

                    this.fileList.push({
                        name: content.icon,
                        url: this.imgPath(content.icon)
                    })
                })
            },
            changeFile (file) {
                this.userForm.file = file.raw
            },
            removeFile () {
                this.userForm.file = null
            }
        }
    }
</script>

<style scoped lang="less">
    .el-input {
        width: 85%;
    }
    /deep/ .el-form-item__content {
        text-align: center;
    }
    .el-radio-group {
        position: relative;
        left: -5%;
    }
    .el-button {
        position: relative;
        left: -9%;
    }
</style>